<template>
  <div class="le">
    <div class="first">
      <div class="titleShadow t-title">地块信息</div>
      <div class="amountmain">
        <div class="detail-mian">
          <div class="detail">
            <div class="img">
              <img src="@/assets/digit/touxiang.png" alt="" />
              <div class="d-btn">查看电子档案</div>
            </div>
            <div class="text">
              <div class="t-de">
                <span class="name">地块编号</span
                ><span class="dd">{{ detail.num }}</span>
              </div>
              <div class="t-de">
                <span class="name">位置</span>
                <span class="dd">{{ detail.potext }}</span>
              </div>
              <div class="t-flex">
                <div>
                  <div class="name">面积</div>
                  <div>{{ detail.area }}亩</div>
                </div>
                <div>
                  <div class="name">地类</div>
                  <span>{{ detail.type }}</span>
                </div>
                <div>
                  <div class="name">管护主体</div>
                  <span>{{ detail.village }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="one">
      <div class="titleShadow t-title">四情监测</div>
      <div class="jiance-ul">
        <div class="jiance-li">
          <div class="jiance-li-title">
            <img src="@/assets/digit/monitor_soil.png" alt="" />
          </div>
          <div class="j-d">
            <div class="tit">气象监测</div>
            <div class="jiance-li-content">
              <div>
                <div
                  class="jiance-li-content-item"
                  v-for="item in deviceData.weather"
                >
                  <div class="name">{{ item.name }}</div>
                  <div class="value">{{ item.value }}{{ item.unit }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="jiance-li">
          <div class="jiance-li-title">
            <img src="@/assets/digit/monitor_soil (1).png" alt="" />
          </div>
          <div class="j-d">
            <div class="tit">苗情监测</div>
            <div class="jiance-li-content">
              <div>
                <div class="jiance-li-content-item">
                  <div class="name">一类苗</div>
                  <div class="value color1">
                    {{ deviceData.seedling.seedlingOneNum }}亩
                  </div>
                </div>
                <div class="jiance-li-content-item">
                  <div class="name">二类苗</div>
                  <div class="value color2">
                    {{ deviceData.seedling.seedlingTreeNum }}亩
                  </div>
                </div>
                <div class="jiance-li-content-item">
                  <div class="name">三类苗</div>
                  <div class="value">
                    {{ deviceData.seedling.seedlingTwoNum }}亩
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="jiance-li">
          <div class="jiance-li-title">
            <img src="@/assets/digit/monitor_insect.png" alt="" />
          </div>
          <div class="j-d">
            <div class="tit">虫情监测</div>
            <div class="jiance-li-content">
              <div>
                <div
                  class="jiance-li-content-item"
                  v-for="item in deviceData.pests"
                >
                  <div class="name">{{ item.name }}</div>
                  <div class="value">{{ item.value }}{{ item.unit }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="jiance-li">
          <div class="jiance-li-title">
            <img src="@/assets/digit/monitor_soil (2).png" alt="" />
          </div>
          <div class="j-d">
            <div class="tit">土壤监测</div>
            <div class="jiance-li-content">
              <div>
                <div
                  class="jiance-li-content-item"
                  v-for="item in deviceData.soil"
                >
                  <div class="name">{{ item.name }}</div>
                  <div class="value">{{ item.value }}{{ item.unit }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="echarts-main">
      <div class="titleShadow t-title">节水灌溉分析</div>
      <div class="echarts">
        <lineMain :datas="lineDatas" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { deviceForPassion, getWaterSaving } from "@/api/vtour";
const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
});
const lineMain = defineAsyncComponent(() => import("./line.vue"));
let lineDatas = ref({
  xData: [2019, 2020, 2021, 2022, 2023, 2024],
  yData: [5.62, 6.7, 7.46, 8.69, 9.68, 11.1],
});
let deviceData = ref({
  weather: [],
  seedling: {
    seedlingOneNum: "",
    seedlingTreeNum: "",
    seedlingTwoNum: "",
  },
  pests: [],
  soil: [],
});
const getSiqing = () => {
  deviceForPassion(props.detail.num).then((res) => {
    deviceData.value = res.data;
  });
};
const getDevice = () => {
  getWaterSaving(props.detail.num).then((res) => {
    lineDatas.value.xData = res.data.times;
    lineDatas.value.yData = res.data.values;
  });
};
getSiqing();
getDevice();
watch(
  () => props.detail,
  () => {
    getSiqing();
    getDevice();
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
.le {
  position: absolute;
  top: 88px;
  left: 0;
  z-index: 2;
  width: 400px;
  height: calc(100% - 88px);
  padding: 20px 0 20px 20px;
  color: #fff;
  background: linear-gradient(
    to right,
    rgb(0 25 46 / 100%),
    rgb(0 25 46 / 80%) 60%,
    rgb(0 25 46 / 10%)
  );

  .t-title {
    padding-left: 20px;
    font-size: 24px;
    line-height: 40px;
    background: url("@/assets/construct/module_title_bg.png") no-repeat;
  }

  .first {
    .amountmain {
      width: 100%;
      padding: 10px 0;

      .detail-mian {
        padding: 10px;
        background: url("@/assets/digit/vtourlfbg.png") no-repeat;
        background-size: 100% 100%;

        .detail {
          display: flex;

          .img {
            img {
              display: block;
              width: 116px;
              height: 96px;
              padding: 3px;
              background: url("@/assets/digit/land_img_frame.png") no-repeat;
              background-size: 100% 100%;
            }

            .d-btn {
              padding: 5px 10px;
              margin-top: 10px;
              font-size: 14px;
              font-weight: bold;
              color: #28ebe4;
              background: url("@/assets/digit/land_information_but.png")
                no-repeat;
              background-size: 100% 100%;
            }
          }

          .text {
            flex: 1;
            align-self: center;
            margin-left: 15px;

            .t-de {
              font-size: 14px;
              font-weight: bold;

              .dd {
                margin-left: 10px;
              }
            }

            .t-flex {
              display: flex;
              padding: 10px 0;
              margin-top: 10px;
              font-size: 14px;
              font-weight: bold;
              background: linear-gradient(
                90deg,
                rgb(40 235 228 / 0%) 0%,
                rgb(40 235 228 / 16%) 50%,
                rgb(40 235 228 / 0%) 100%
              );

              & > div {
                flex: 1;
              }
            }

            .name {
              color: #7cc2bf;
            }
          }
        }

        .hsebei {
          display: flex;
          justify-content: space-between;
          padding: 10px 20px;
          background: gradient(
            180deg,
            rgb(8 20 37 / 54%) 0%,
            rgb(47 61 82 / 9%) 100%
          );
          border: 1px solid #2e618f;
          box-shadow: inset 0 5px 20px 0.5px #2b2e34;

          .hse-li {
            display: flex;
            padding-top: 5px;
            padding-right: 10px;
            padding-bottom: 5px;
            font-size: 12px;
            border-right: 1px solid #2e618f;

            &:nth-child(3) {
              padding-right: 0;
              border-right: 0;
            }

            .name {
              margin-right: 10px;
            }

            .total {
              color: #919dbc;

              span {
                margin: 0 5px;
                font-size: 14px;
              }

              .color1 {
                color: #fff;
              }

              .color2 {
                color: #4df0bc;
              }

              .color3 {
                color: #f09e4d;
              }
            }
          }
        }
      }
    }
  }

  .echarts-main {
    height: calc(100% - 560px);

    .echarts {
      height: calc(100% - 36px - 10px);
      margin-top: 10px;
    }
  }

  .one {
    padding-bottom: 10px;

    .jiance-ul {
      height: 300px;
      padding: 0 10px;
      overflow: auto;
      font-size: 12px;

      .jiance-li {
        display: flex;
        margin-top: 10px;

        .jiance-li-title {
          img {
            display: inline-block;
            width: 90px;
            margin-right: 20px;
            vertical-align: middle;
          }
        }

        .j-d {
          flex: 1;
          align-self: center;
          width: calc(100% - 90px - 20px);

          .tit {
            padding-left: 10px;
            margin-bottom: 10px;
            font-size: 14px;
            font-weight: bold;
            color: #7cc2bf;
            background: linear-gradient(
              90deg,
              rgb(28 99 232 / 10%) 0%,
              rgb(28 99 232 / 0%) 100%
            );
            border-left: 1px solid #0fb8a1;
          }

          .jiance-li-content {
            width: 100%;

            & > div {
              width: 100%;
              overflow: auto;
              white-space: nowrap;

              .jiance-li-content-item {
                display: inline-block;
                margin-right: 20px;
                text-align: center;

                .name {
                  color: #7cc2bf;
                }

                .value {
                  font-size: 16px;
                  font-weight: bold;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
